import React, { ReactElement, useState, useRef } from 'react';
import { Button, Space, Table } from 'antd';
import { DownOutlined, SettingOutlined } from '@ant-design/icons';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { getGoodsType } from '@/api/goodsType';

// 引入子组件
import AddGoodsType from './components/AddGoodsType';
import UpdateGoodsType from './components/UpdateGoodsType';

interface Props {}

export default function index({}: Props): ReactElement {
  type Status = {
    color: string;
    text: string;
  };

  type TableListItem = {
    key: number;
    name: string;
    containers: number;
    creator: string;
    status: Status;
    createdAt: number;
  };

  const columns: ProColumns<TableListItem>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      search: false,
    },
    {
      title: '名称',
      dataIndex: 'title',
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueType: 'select',
      valueEnum: {
        '1': {
          text: '启用',
        },
        '2': {
          text: '停用',
        },
      },
    },
    {
      title: '操作',
      valueType: 'option',
      render: (text, record, _, action) => {
        const reload = () => {
          action?.reload();
        };
        return (
          <UpdateGoodsType reload={reload} data={record}></UpdateGoodsType>
        );
      },
    },
  ];

  const [record, setRecord] = useState({});
  const [visible, setVisible] = useState<boolean>(false);
  //打开抽屉
  const change = (item: any) => {
    setRecord(item);
    setVisible(true);
  };

  //关闭抽屉
  const close = () => {
    setRecord({});
    setVisible(false);
  };
  const actionRef = useRef<ActionType>();
  const reload = () => {
    actionRef.current?.reload();
  };
  return (
    <>
      <ProTable<TableListItem>
        columns={columns}
        actionRef={actionRef}
        request={async (params = {}, sorter, filter) => {
          // 表单搜索项会从 params 传入，传递给后端接口。
          // console.log(params);
          const { title, status } = params;
          const res = await getGoodsType({ name: title, status });
          const data = res.data.rows.children;
          // console.log('data',data);

          return {
            data,
            success: true,
            total: res.data.total,
          };
        }}
        rowSelection={{
          // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
          // 注释该行则默认不显示下拉选项
          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
        }}
        // rowKey=

        pagination={{
          showQuickJumper: true,
        }}
        // expandable={{ }}
        // search={false}
        dateFormatter="string"
        //表头
        headerTitle={
          <AddGoodsType
            reload={reload}
            record={record}
            close={close}
            visible={visible}
          ></AddGoodsType>
        }
        options={false}
        toolBarRender={() => [
          <Button key="show">查看日志</Button>,
          <Button key="out">
            导出数据
            <DownOutlined />
          </Button>,
        ]}
        tableAlertRender={({
          selectedRowKeys,
          selectedRows,
          onCleanSelected,
        }) => {
          // console.log(selectedRowKeys, 'ss');
          // setRoleId([...selectedRowKeys])
          return (
            <Space size={24}>
              <span>
                已选 {selectedRowKeys.length} 项
                {/* <a style={{ marginLeft: 8 }} onClick={onCleanSelected}>
              取消选择
            </a> */}
              </span>
            </Space>
          );
        }}
        tableAlertOptionRender={(a) => {
          // console.log(a);
          return (
            <Space size={16}>
              <Button>批量删除</Button>
              {/* <Button onClick={() => delAll(a)}>批量删除</Button> */}
            </Space>
          );
        }}
      />
    </>
  );
}
